<template>
  <view class="nPicker">
    <view class="textarea vertical-shadow mb20">
      <view class="label">{{ param.label }}</view>
      <view class="popup-picker">
        <picker :mode="param.mode" :range="param.option" :range-key="param.param" @change="bindPickerChange">
          <view class="txt">
            <span v-if="!pickType.includes(param.mode)">
              <block v-if="param.active > -1">
                {{ param.option[param.active][param.param] }}
              </block>
              <block v-else>{{ defaultValue }}</block>
            </span>
            <span v-else>
              <block v-if="param.value != ''">
                {{ param.value }}
              </block>
              <block v-else>{{ defaultValue }}</block>
            </span>
          </view>
          <image class="arrow" mode="aspectFit" src="../../static/img/icon/arrow-down-2.png"></image>
        </picker>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "nPicker",
  components: {},
  props: {
    param: {
      type: Object,
      default: () => ({}),
    },
    form: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      defaultValue: "请选择",
      pickType: ['date', 'time', 'region']
    };
  },
  computed: {},
  watch: {

  },
  created() {
    console.log(this.param);
  },
  onLoad(d) { },
  onShow() { },
  methods: {
    bindPickerChange(e) {

      if (this.pickType.includes(this.param.mode)) {
        this.param.value = e.detail.value;
        this.form[this.param.key] = this.param.value
      } else {
        this.param.active = e.detail.value;
        this.form[this.param.key] = this.param.option[this.param.active][this.param.match];
      }
      console.log(this.param);
      this.$emit("update:form", this.form);
    },
  },
};
</script>
<style lang="less" scoped>
.textarea {
  background: #fff;
  padding: 30upx 40upx;

  .label {
    margin-bottom: 20upx;
    color: #888990;
  }
}

.popup-picker {
  position: relative;
  padding: 0 28upx;
  height: 80upx;
  line-height: 80upx;
  font-size: 30upx;
  color: #AAAAAA;
  background: #FFFFFF;
  border-radius: 8upx;
  border: 1upx solid #DDDDDD;

  .txt {
    padding-right: 30upx;
    color: #1d256e;

    &.default {
      color: #888990;
    }
  }

  .arrow {
    position: absolute;
    top: 50%;
    right: 24upx;
    transform: translate(0, -50%);
    width: 24upx;
    height: 24upx;
  }
}

/deep/ .transition {
  height: 40%;
}

/deep/ .bottom {
  height: 100%;
  background-color: rgb(255, 255, 255) !important;
  // padding: 20upx;
  border-radius: 20upx;
}

.flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 20upx;
}
</style>
